<template>
  <div class="login-container">

    <div class="box-blank"></div>
    <div class="title-container">
      <!-- ??  {{appName}}  -->
      <h3 class="title text-capitalize">{{appName}}</h3>
    </div>
    <div class="box-tab">
      <!-- ??   -->
      <el-tabs class="pb-tabs" v-model="loginType" @tab-click="chgLoginType">
        <el-tab-pane label="账号密码登录" name="password"></el-tab-pane>
      </el-tabs>
    </div>
    <el-form :model="loginInfo" ref="loginInfo" :rules="loginRules" class="login-form" autocomplete="on"
             label-position="left" v-show="loginType == 'password'">
      <el-form-item prop="usercode">
        <span> <i class="icon1 el-icon-user-solid"/> </span>
        <el-input  ref="usercode" v-model="loginInfo.usercode" placeholder="登录账号" name="usercode"
                   @keypress.enter.native="onUserCodeEnter"    type="text" tabindex="1" autocomplete="on"/>
      </el-form-item>

      <el-tooltip v-model="capsTooltip" content="大写键已经按下" class="text-capitalize" placement="right"
                  manual>
        <el-form-item prop="password">
          <span>
            <i class="icon1 el-icon-lock"/>
          </span>
          <el-input ref="userpwd" :key="passwordType" v-model="loginInfo.userpwd" :type="passwordType"
                    placeholder="登录密码" name="userpwd" tabindex="2"
                    @keyup.native="checkCapslock" @keypress.enter.native="onUserPwdEnter"
                    @blur="capsTooltip = false" />
          <span class="show-pwd" @click="onShowPwd">
            <i :class="['icon1', 'iconfont', passwordType === 'password' ? 'icon-eye-close' : 'icon-eye-open']"/>
          </span>
        </el-form-item>
      </el-tooltip>

      <el-form-item class="box-remember-pwd">
        <el-switch v-model="rememberPassword" active-value="1" inactive-value="0"></el-switch>
        <span class="txt-remember-pwd text-capitalize">记住密码</span>
      </el-form-item>

      <el-button  :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" class="text-capitalize" @click="onLogin">
        登 录
      </el-button>

    </el-form>

    <el-form class="login-form" autocomplete="on"
             label-position="left" v-show="loginType == 'wx_qrcode'">

    </el-form>

  </div>
</template>

<script>
  import arequest from '@/common/utils/request';

  export default {
    name: 'Login',
    computed: {
      storeLoginUserInfo() {
        return this.$store.state.loginUserInfo;
      },
      storeRememberPassword(){
        return this._getStore_loginRememberPwd;
      },

    },
    watch: {
      storeLoginUserInfo(newVal, oldVal) {
        if (newVal) {
          this._doRedirect();
        }
      },
      $route: {
        handler: function (route) {
          const query = route.query;
          if (query) {
            this.redirect = query.redirect;
            this.otherQuery = this._getOtherQuery(query);
          }
        },
        immediate: true
      }
    },
    data() {
      return {
        loginInfo: {
          usercode: '',
          userpwd: ''
        },
        loginRules: {
          usercode: [{
            required: true,
            trigger: 'blur',
            message: '登录账号必填'
          }],
          userpwd: [{
            required: true,
            trigger: 'blur',
            message: '登录密码必填'
          }]
        },
        loginType: 'password',
        appName: this.settings.appName,
        passwordType: 'password',
        rememberPassword:0,
        capsTooltip: false,
        loading: false,
        redirect: undefined,
        otherQuery: {},


      };
    },
    // ?? 查查 vue的声明周期
    mounted() {
      // ??  查查 vue 的 store
      let _store1 = this._getStore_loginRememberPwd() ;

      if(_store1==null){
        this.rememberPassword = 0;
      }else{
        this.rememberPassword = _store1.status;
        this.loginInfo.usercode = _store1.usercode;
        this.loginInfo.userpwd = _store1.userpwd;

      }

      document.title = this.settings.appName +' -- 登录入口';
    },
    updated() {
      document.title = this.settings.appName +' -- 登录入口';
    },
    methods: {
      // 检验键盘 CapsLock是否开启
      checkCapslock(e) {
        const keyCode = e.keyCode || e.which;
        const isShift = e.shiftKey || (keyCode === 16) || false;

        // Caps Lock 打开，且没有按住shift键
        let c1 = (keyCode >= 65 && keyCode <= 90) && !isShift;
        // Caps Lock 打开，且按住shift键
        let c2 = (keyCode >= 97 && keyCode <= 122) && isShift;

        this.capsTooltip = c1 || c2;
      },
      // 当点击显示密码明文按钮
      onShowPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = 'text';
        } else {
          this.passwordType = 'password';
        }
        this.$nextTick(() => {
          this.$refs.userpwd.focus();
        });
      },
      // 切换登录方式
      chgLoginType(){
        // console.log(this.loginType);
      },

      onUserCodeEnter(){
        this.$refs['userpwd'].focus();
      },
      onUserPwdEnter(){
        this.onLogin();
      },
      // 执行登录
      onLogin() {
        let _this = this;
        // 验证账号密码格式
        this.$refs['loginInfo'].validate((valid) => {
          if (valid) {
            _this.loading = true;

            // 执行登录
            arequest.post( this.settings.apiUrl + '/user_info/do_login',  this.loginInfo  )
              .then((d1r) => {
                _this.loading = false;
                if (d1r.code === 0) {
                  // 记录密码
                  _this._doRememberPwd(_this.rememberPassword);
                  _this.$store.commit('setLoginUserInfo', d1r.data);

                }else{

                  this.$alert('登录失败：'+d1r.msg, '提示', {
                    type: 'warning'
                  });

                }
              }).catch(err => {
              _this.loading = false;
              console.log(err);
            });

          } else {
            _this.loading = false;
            return false;
          }
        });
      },
      _doRedirect() {
        this.$router.push({path: this.redirect || '/admin/index', query: this.otherQuery});
      },
      _doRememberPwd(val) {
        let data = {};
        if (val === '1') {
          data = {'status': '1', 'usercode': this.loginInfo.usercode, 'userpwd': this.loginInfo.userpwd};
        } else {
          data = {'status': '0', 'usercode': '', 'userpwd': ''};
        }
        this.$store.commit('setLoginRememberPwd', data);
      },
      // 获得其他的query 字段
      _getOtherQuery(query) {
        return Object.keys(query).reduce((acc, cur) => {
          if (cur !== 'redirect') {
            acc[cur] = query[cur];
          }
          return acc;
        }, {});
      },
      _getStore_loginRememberPwd(){
        return this.$store.state.loginRememberPwd;
      },

    },



  };
</script>

<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #283443;
  $light_gray: #eee;
  $cursor: #fff;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }


  }
</style>

<style lang="scss" scoped>
  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;


  .login-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;

    .box-change-locale-lang {
      display: flex;
      justify-content: flex-end;
      padding: 20px 30px 0px;
    }

    .login-form {
      position: relative;
      width: 520px;
      max-width: 100%;
      padding: 10px 35px 0;
      margin: 0 auto;
      overflow: hidden;
    }

    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
      padding-left:10px;
      padding-right: 10px;

      &.box-remember-pwd {
        border: none;
        background-color: rgba(0, 0, 0, 0);

        .txt-remember-pwd {
          padding-left: 30px;
          color: #ffffff;
        }
      }

    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .icon1 {
      font-size: 18px;
      color: #eeeeee;
    }

    .box-blank{
      height: 120px;
    }
    .title-container {

      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }

      @media only screen and (max-width: 470px) {
        .title {
          font-size: 22px;
        }

      }
    }

    .show-pwd {
      position: absolute;
      right: 4px;
      top: 3px;
      cursor: pointer;
      user-select: none;
    }

    .pb-tabs>>>{
      margin:0 auto;
      width: 520px;
      max-width: 100%;
      padding:0 35px;
      .el-tabs__item{
        color:$light_gray;
        &.is-active{
          color: #409EFF;
        }
      }
    }

    .box-wxqrcode-login{
      margin:0 auto;
      width: 520px;
      max-width: 100%;
      padding:0 35px;
    }
  }
</style>
